<template>
  <div style="border: 1px solid #ccc" class="editor" v-if="content!=''">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden;" v-model="content" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" @onChange="changevalue" />
  </div>
</template>
<script setup>
import "@wangeditor/editor/dist/css/style.css";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onBeforeUnmount, ref, shallowRef, onMounted, getCurrentInstance, watch } from 'vue'
const props = defineProps({
  valueHtml: {
    type: String,
    defalut: ''
  }
})
const content = ref('')
watch(() => props.valueHtml, value => {
  // console.log(value)
  content.value = value
})

onMounted(() => {
  content.value = props.valueHtml
  // console.log(content.value)
})

const mode = ref('default')
const { proxy } = getCurrentInstance()
// 工具栏配置
const editorRef = shallowRef()
const toolbarConfig = {
  toolbarKeys: [
    // 一些常用的菜单 key
    'bold', // 加粗
    'italic', // 斜体
    'through', // 删除线
    'underline', // 下划线
    'bulletedList', // 无序列表
    'numberedList', // 有序列表
    'color', // 文字颜色
    'insertLink', // 插入链接
    'fontSize', // 字体大小
    'lineHeight', // 行高
    'uploadImage', // 上传图片
    'uploadVideo',//上传视频
    'delIndent', // 缩进
    'indent', // 增进
    'deleteImage',//删除图片
    'divider', // 分割线
    'insertTable', // 插入表格
    'justifyCenter', // 居中对齐
    'justifyJustify', // 两端对齐
    'justifyLeft', // 左对齐
    'justifyRight', // 右对齐
    'undo', // 撤销
    'redo', // 重做
    'clearStyle', // 清除格式
    'fullScreen' // 全屏
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    // 可以在这里配置菜单项，例如上传图片的配置
    uploadImage: {
      server: '你的图片上传接口',
      fieldName: 'file',
      methods: 'post',
      metaWithUrl: true,
      customInsert: (res, insertFn) => {
        insertFn(res.url)
      }
    }
  }
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 组件创建时
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
  // console.log(editor)
}
const emit = defineEmits(['change'])
function changevalue() {
  // console.log(e.getText())
  emit('change', content.value)
}
</script>
<style scoped lang="scss"></style>
